<template>
    <div class="pagination">
      <div>起始数{{startNumAndEndNum.start}}</div><div>结束数字{{startNumAndEndNum.end}}</div>
      <div>当前页{{pageNo}}</div>
      <button>上一页</button>
      <button v-if="startNumAndEndNum.start>1">1</button>      
      <button v-if="startNumAndEndNum.start>2">...</button>  
       
      <button v-for="(page,index) in startNumAndEndNum.end" :key="index" v-show="page >= startNumAndEndNum.start" > {{page}}</button>
      
      <button v-if="startNumAndEndNum.end < totalPage-1">···</button>
      <button v-if="startNumAndEndNum.end < totalPage">{{totalPage}}</button>
      <button>下一页</button>
      
      <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
  </template>
<script>
export default{
    name:"Pagination",
    props:['pageNo','pageSize','total','continues'],
    computed:{
      // 计算共多少页
      totalPage(){
        // 向上取整
        return Math.ceil(this.total/this.pageSize);
      },
      // 需计算出连续页码的起始和结束数字【连续页码数至少是5】
      startNumAndEndNum(){
        // 必须解构出来才能计算
        const {continues,pageNo,totalPage} = this;
        // 定义一个变量存储 起始和结束数字
        let start = 0,end = 0 ;
        // continues连续页码数为5,【至少是连续5页】
        // 【不正常情况】如果continues连续页码数，大于总页数
        if(continues > totalPage){
          start = 1;
          end = totalPage;
        }else{
          //【正常情况】 continues连续页码数为5,【至少是连续5页】的情况.总页数移动大于5
          start = pageNo - parseInt(continues/2);
          end = pageNo + parseInt(continues/2);
       
          // 如果开始数字<1 ,会出现负数【不正常情况】，需要纠正
          if(start < 1 ){
            start = 1;
            end = continues;
          }
          // 结束数字【end>总页码数】需要纠正
          if(end > totalPage){
            end = totalPage;
            start = totalPage-continues + 1;
          }
        }
        return {start,end};
        
      },
      

    }
}
</script>
<style scoped lang="less">
.pagination {
    text-align: center;
    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #409eff;
            color: #fff;
        }
    }
  }
</style>